<script setup lang="ts">
import { useRequest } from 'vue-request'
import { fetchDriverDetailAPI } from '@/apis/fetchDriverDetail'
import { useUserInfoStore } from '@/store/userInfo'
import { useDriverStatusStore } from '@/store/driverStatus'

const router = useRouter()
const userInfoStore = useUserInfoStore()
const driverStatusStore = useDriverStatusStore()

const { data: driverDetail } = useRequest(
  () => fetchDriverDetailAPI(userInfoStore.userInfo!.token).then((res) => {
    driverStatusStore.isOnline = Boolean(res.data?.data.is_online)
    return res.data?.data
  }),
)
const isComeIn = computed(() => {
  return driverDetail.value?.status.toString() === '1'
})
const isLoggedIn = computed(() => {
  return userInfoStore.userInfo && userInfoStore.userInfo.token.length > 0
})

function handleUpdateProfile() {
  router.push('profileSettings')
}

function handleWithdraw() {
  router.push({
    name: 'withdrawal',
    params: {
      money: driverDetail.value?.money || '',
    },
  })
}

function handleViewBalanceDetails() {
  router.push({
    name: 'balanceRecord',
    params: {
      money: driverDetail.value?.money || '',
    },
  })
}

function handleSignIn() {
  router.push('signin')
}

function handleTapSettings() {
  router.push('settings')
}
</script>

<template>
  <view class="absolute left-0 top-0 h-400rpx w-screen bg-#3F8BF6" />
  <view class="relative z-10 px-24rpx">
    <Spacer h="65" />
    <!-- 头像、昵称、手机号 -->
    <ProfileHeader
      @update-profile="handleUpdateProfile"
      @sign-in="handleSignIn"
    />
    <Spacer h="55" />
    <!-- 余额卡片 -->
    <view class="rounded-10rpx bg-white p-40rpx">
      <view class="text-32rpx text-#333333 leading-45rpx">
        我的余额
      </view>
      <Spacer h="4" />
      <view class="flex items-center justify-between">
        <view class="text-72rpx text-#333333 font-medium leading-100rpx">
          {{ isLoggedIn && driverDetail?.money ? `¥${driverDetail?.money}` : '******' }}
        </view>
        <RGButton
          size="small"
          corner="full"
          class="shadow-blue shadow-lg shadow-opacity-40"
          @tap="handleWithdraw"
        >
          立即提现
        </RGButton>
      </view>
      <Spacer h="20" />
      <view class="flex items-center" @tap="handleViewBalanceDetails">
        <view class="text-28rpx text-#BDBDBD leading-40rpx">
          提现记录
        </view>
        <Spacer w="20" />
        <image
          class="h-28rpx w-16rpx"
          src="@/static/images/chevron_right_gray.png"
        />
      </view>
    </view>
    <Spacer h="20" />
    <!-- 菜单卡片 -->
    <view class="rounded-10rpx bg-white">
      <view v-if="!isComeIn" class="flex items-center justify-between p-40rpx" hover-class="bg-#f8f8f8" @tap="handleSignIn">
        <view class="flex items-center">
          <image
            class="h-46rpx w-46rpx"
            src="@/static/images/driver.png"
          />
          <Spacer w="12" />
          <view class="text-28rpx text-#333333 leading-45rpx">
            入驻司机
          </view>
        </view>
        <image
          class="h-28rpx w-16rpx"
          src="@/static/images/chevron_right_black.png"
        />
      </view>
      <Divider w="623" />
      <view class="flex items-center justify-between p-40rpx" hover-class="bg-#f8f8f8" @tap="handleTapSettings">
        <view class="flex items-center">
          <image
            class="h-46rpx w-46rpx"
            src="@/static/images/settings.png"
          />
          <Spacer w="12" />
          <view class="text-28rpx text-#333333 leading-45rpx">
            设置
          </view>
        </view>
        <image
          class="h-28rpx w-16rpx"
          src="@/static/images/chevron_right_black.png"
        />
      </view>
    </view>
  </view>
  <image
    class="fixed bottom-24rpx h-66rpx w-199rpx x-center"
    src="@/static/images/watermark.png"
  />
</template>

<route lang="yaml">
name: 'profile'
style:
  navigationBarTitleText: '个人中心'
</route>
